<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #messages {
            border: 1px solid #ccc;
            height: 300px;
            overflow-y: scroll;
            padding: 10px;
        }
        #inputMessage {
            width: 80%;
        }
        button {
            padding: 5px 10px;
        }
    </style>
</head>
<body>

<h1>欢迎来到聊天室</h1>

<div id="messages"></div>

<input type="text" id="inputMessage" placeholder="输入消息...">
<button onclick="sendMessage()">发送</button>

<script>
    // 创建 WebSocket 连接
    // const ws = new WebSocket('ws://chat.heiduoke.cn/ws?abc=123');
    const ws = new WebSocket('wss://chat.heiduoke.cn?live_room_id=1')
    console.log(ws)
    // 获取消息显示区域
    const messagesDiv = document.getElementById('messages');

    // 监听 WebSocket 连接打开事件
    ws.onopen = () => {
        console.log("已连接到服务器");
    };

    // 监听 WebSocket 消息事件
    ws.onmessage = (event) => {
        const newMessage = document.createElement('div');
        newMessage.textContent = event.data;
        messagesDiv.appendChild(newMessage);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;  // 滚动到最新消息
    };

    // 监听 WebSocket 关闭事件
    ws.onclose = () => {
        console.log("与服务器的连接已关闭");
    };

    // 发送消息
    function sendMessage() {
        const inputMessage = document.getElementById('inputMessage').value;
        if (inputMessage.trim()) {
            ws.send(inputMessage);  // 发送消息到服务器
            document.getElementById('inputMessage').value = '';  // 清空输入框
        }
    }
</script>

</body>
</html>
